import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { PlayItemWrapper } from './styled'
import { formatPlayCount } from '@/utils/useFormatPlayCount'

interface Iprops {
  children?: ReactNode
  itemData: any
}

const PlayListItem: FC<Iprops> = (props) => {
  const { itemData } = props

  const picUrl = itemData.picUrl + '?param=140y140'

  const playCount = formatPlayCount(itemData.playCount)
  return (
    <PlayItemWrapper>
      <div className="top">
        <div className="top-area">
          <img className="top-img" src={picUrl} alt={itemData.name} />
          <a href="" className="mask"></a>
          <div className="play-info">
            <div className="play-count">
              <i className="icon"></i>
              <span className="count"> {playCount}</span>
            </div>
            <div className="play-btn"></div>
          </div>
        </div>
      </div>
      <div className="title">{itemData.name}</div>
    </PlayItemWrapper>
  )
}
export default memo(PlayListItem)
